import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannels, toggleChannels } from '../store/actions/index'
import { RootState } from '../types/store'
export const Channels = () => {
  const dispatch = useDispatch()
  const { channels, activeId } = useSelector(
    (state: RootState) => state.channels
  )
  // 获取频道数据
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch])
  return (
    <ul className="category">
      {channels.map((item) => (
        <li className={item.id === activeId ? 'select' : ''} key={item.id} onClick={()=>dispatch(toggleChannels(item.id))}>
          {item.name}
        </li>
      ))}
    </ul>
  )
}
